<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<header class="navigation" id="sticky-nav">
<div class="top-header">
<div class="top-header-inner">
<ul>
</ul>
<ul class="top-header-nav list-inline">
<li> <a href="#"> <i class="fas fa-user"></i>    Login </a></li>
<li><a href="#"> Register </a></li>
</ul>
</div>
</div>
<nav id="cssmenu" class="navigation">
<div class="top-logo">
<a href="index.html"><img src="https://i.ibb.co/1r0fzBj/placeholder-com-logo1.png"></a>
</div>
<div id="head-mobile"></div>
<div class="button"></div>
<ul class="list-inline">
<li><a href="index.html"> Home</a></li>
<li><a href="#"> About Us </a></li>
<li><a href="#"> Gallery</a></li>
<li class="has-sub"><span class="submenu-button"></span><a href="#">Services</a>
<ul class="sub-menu">
<li><a href="#">Services</a></li>
<li><a href="#">Coaching</a></li>
<li><a href="#">Workshops</a></li>
<li><a href="#">Retreats</a></li>
</ul>
</li>
<li><a href="#">latest News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<section class="banner-section">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-image:url(https://i.ibb.co/BZ6d4Rv/home-1-slider-1-bg.jpg)">
<div class="banner-overlay"></div>
</div>
<div class="carousel-item" style="background-image:url(https://i.ibb.co/BZ6d4Rv/home-1-slider-1-bg.jpg)">
<div class="banner-overlay"></div>
</div>
<div class="carousel-item" style="background-image:url(https://i.ibb.co/Rbm6bgC/home-1-slider-3-bg.jpg)">
<div class="banner-overlay"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<i class="fas fa-long-arrow-alt-left"></i>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<i class="fas fa-long-arrow-alt-right"></i>
</a>
</div>
<div class="shape-1 bottom" style="height: 250px; overflow: hidden;">
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<path d="M0.00,49.98 C150.00,150.00 349.20,-50.00 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #fff;"></path>
</svg>
</div>
</section>
body{
font-family: 'Montserrat', sans-serif;}
.top-logo {
width: 15%;
float: left;
}
header#sticky-nav {
width: calc(100% - 40px);
border-radius: 8px;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
z-index: 990;
transition: background-color .3s;
box-shadow: 0 2px 9px 0 rgba(34,12,43,.1);
}
header#sticky-nav:after, header#sticky-nav:before {
content: "";
position: absolute;
height: 100%;
z-index: -1;
border-radius: 8px;
transition: .3s;
pointer-events: none;
}
header#sticky-nav:before {
top: 5px;
left: 20px;
width: calc(100% - 40px);
background-color: hsla(0,0%,100%,.6);
}
header#sticky-nav:after {
top: 10px;
left: 40px;
width: calc(100% - 80px);
background-color: hsla(0,0%,100%,.4);
}
header#sticky-nav .top-header {
padding-left: 75px;
padding-right: 75px;
}
header#sticky-nav .top-header {
border-radius: 6px 6px 0 0;
}
.top-header {
padding: 10px 0;
background-color: #6c5ce7;
}
.top-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.top-header-nav {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
margin: 0;
}
ul.top-header-nav li {
margin: 0 15px;
}
.top-bar-custom-btn:hover {
border: 1px solid #919e82;
background: #919e82;
color: #fff;
transition: 0.54s ease;
}
.top-bar-custom-btn {
background: #6c5ce7;
color: #fff;
padding: 5px 15px 6px;
border-radius: 50px;
text-transform: capitalize;
letter-spacing: 0.8px;
font-weight: 600;
transition: 0.5s ease;
border: 1px solid #ffffff;
}
header#sticky-nav:hover:after, header#sticky-nav:hover:before {
left: 0;
top: 0;
width: 100%;
}
#cssmenu {
padding-left: 75px;
padding-right: 75px;
}
.top-header-nav li iframe {
position: relative;
top: 3px;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
nav#cssmenu {
text-align: right;
line-height: 0;
}
.navigation.sticky.scrolling nav#cssmenu {
text-align: center;
margin-top: 10px;
float: none;
}
.navigation.sticky.scrolling .open_status {
display: none;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#cssmenu #head-mobile {
display: none
}
#cssmenu ul {
float: none;
text-align: left;
display: inline-block;
margin-bottom: 0;
}
#cssmenu > ul > li {
display: inline-block;
align-items: center;
padding-top: 2rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 2rem;
}
#cssmenu > ul > li > a {
padding: 10px 6px;
font-size: 16px;
letter-spacing: 0.4px;
text-decoration: none;
color: #2a2f40;
font-weight: 500;
text-transform: capitalize;
transition:0.3s ease;
}
.navigation.sticky.scrolling #cssmenu > ul > li > a {
color: #fff;
}
.navigation.sticky.scrolling #cssmenu > ul > li > a:hover {
color: #f4769a;
transition:0.3s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
color: #f4769a;
transition:0.3s ease;
}
#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.has-sub.active:hover {
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#cssmenu > ul > li.has-sub > a:before {
color: #ccc;
}
#cssmenu > ul > li.has-sub:hover > a:before {
transform: rotate(180deg);
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
z-index: 1;
background: #fff;
transform-origin: top;
transform: rotateX(-90deg);
transition: transform 0.2s linear;
top: 100%;
width: 220px;
padding: 0px;
background: #ffffff;
border-top: 2px solid #f47599;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
-webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.05), -2px 0px 5px 1px rgba(0,0,0,0.05);
-ms-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
-o-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
-moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.05),-2px 0px 5px 1px rgba(0,0,0,0.05);
box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.05), -2px 0px 5px 1px rgba(0,0,0,0.05);
}
#cssmenu ul ul > li:hover > a {
background: #6c5ce7;
color: #ffffff !important;
}
#cssmenu li:hover > ul {
left: 0;
transform: rotateX(-0deg);
}
#cssmenu ul ul li {
position: relative;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.15);
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul li:hover {}
#cssmenu li:hover > ul {
left: 0;
padding-left:0;
}
#cssmenu li:hover > ul > li {
height: 100%;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
position: relative;
display: block;
padding: 12px 20px;
line-height: 22px;
font-weight: 400;
font-size: 15px;
text-transform: capitalize;
color: #222222;
transition: all 500ms ease;
-moz-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #000;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #555;
}
#cssmenu ul ul ul li.active a {
border-left: 1px solid #333
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
border-top: 1px solid #333
}
@media screen and (max-width:1000px) {
.open_status {
float: left !important;
}
#cssmenu > ul > li > a {
padding: 17px 10px;
background: #121116;
}
#cssmenu > ul > li > a {
padding: 16px 10px;
color: #ccc;
text-align: left;
}
#cssmenu ul {
float: none;
margin-top: 10px;
}
.logo {
max-width: 220px;
margin-left: 15px;
}
.logo2 {
display: none
}
nav {
width: 100%;
}
#cssmenu {
width: 100%;
float: none !important;
}
#cssmenu ul {
width: 100%;
display: none;
padding-left: 0;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid #999;
}
#cssmenu ul li:hover {
background: #363636;
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0
}
#cssmenu > ul > li {
float: none;
padding:0;
}
#cssmenu ul ul li a {
padding-left: 25px
}
#cssmenu ul ul li {
background: #333 !important;
}
#cssmenu ul ul li:hover {
background: #363636 !important
}
#cssmenu ul ul ul li a {
padding-left: 35px
}
#cssmenu ul ul li a {
color: #ddd;
background: none
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #fff
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none
}
#cssmenu #head-mobile {
display: block;
padding: 26px;
color: #ddd;
font-size: 12px;
font-weight: 700;
}
#cssmenu .button {
width: 55px;
height: 46px;
position: absolute;
right: 0;
top: 18px;
cursor: pointer;
z-index: 12399994;
}
#cssmenu .button:after {
position: absolute;
top: 26px;
right: 20px;
display: block;
height: 8px;
width: 20px;
border-top: 2px solid #FF5722;
border-bottom: 2px solid #FF5722;
content: '';
}
.top-logo a img {
max-width: 130px;
width: auto;
padding-top: 5px;
padding-bottom: 10px;
}
#cssmenu .button:before {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
position: absolute;
top: 19px;
right: 20px;
display: block;
height: 2px;
width: 20px;
background: #FF5722;
content: '';
}
#cssmenu .button.menu-opened:after {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
top: 23px;
border: 0;
height: 2px;
width: 19px;
background: #FF5722;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu .button.menu-opened:before {
top: 23px;
background: #FF5722;
width: 19px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #fff;
height: 46px;
width: 46px;
cursor: pointer
}
#cssmenu .submenu-button.submenu-opened {
background: #262626
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px
}
#cssmenu .submenu-button.submenu-opened:after {
background: #fff
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px
}
#cssmenu .submenu-button.submenu-opened:before {
display: none
}
#cssmenu ul ul ul li.active a {
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
border-top: none
}
}
.top-logo a img {
max-width: 300px;
width: auto;
padding-top: 16px;
}
.open{
display:block;
}
a:hover{
text-decoration:none;
}
.carousel-item {
height: 100vh;
background-size: cover;
background-attachment: fixed;
background-position: bottom;
}
.about-section{
padding:100px 0;
}
.section-title {
color: #6c5ce7;
text-transform: capitalize;
font-weight: bold;
letter-spacing: 0.7px;
font-size: 30px;
line-height: 40px;
padding-bottom: 10px;
font-family: 'Poppins', sans-serif;
}
.section-description {
font-weight: 300;
font-size: 25px;
line-height: 36px;
margin-bottom: 30px;
}
.custom-btn-nav {
background-image: -webkit-linear-gradient( -159deg, rgb(145 158 130) 0%, rgb(48 66 40) 100%);
background-image: -ms-linear-gradient( -159deg, rgb(131,104,255) 0%, rgb(85,78,138) 100%);
box-shadow: 1px 1px 15px 1px #00000061;
font-size: 17px;
padding: 15px 30px;
border: 0;
border-radius: 37px;
color: #fff;
text-decoration: none;
letter-spacing:0.7px;
transition: 0.5s all;
}
.custom-btn-nav:hover {
transition: 0.5s all;
background-image: -webkit-linear-gradient( -159deg, rgb(48 66 40) 0%, rgb(48 66 40) 100%);
color: #fff;
}
.about-text p {
line-height: 30px;
color: #6c757d;
font-size: 16px;
margin-bottom: 10px;
}
.section-heading span {
color: #919e82;
margin-top: 10px;
}
.space-t-40{
margin-bottom:40px;
}
.about_img-inner{
margin: 0px 45px;
}
.about_img-inner:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 47px;
opacity: 0.8;
transform: rotate(19deg);
transform: rotate(-17deg);
box-shadow: 4px 6px 38px #ccc;
border-radius: 40px;
background-color: hsla(0, 0%, 80%, 0.5098039215686274);
}
.about_img-inner img {
z-index: 99;
position: relative;
box-shadow: 4px 6px 5px #ccc;
border-radius: 40px;
margin: 0 auto;
width: 100%;
display: block;
}
.about_img-inner:after {
content: '';
position: absolute;
left: 18px;
right: 0;
top: 25px;
bottom: 0;
transform: rotate(-15deg);
box-shadow: 5px 6px 17px #ccc;
border-radius: 40px;
background-color: rgba(204, 204, 204, 0.5686274509803921);
}
.about_img-inner {
position: relative;
box-shadow: 4px 6px 35px #ccccccd1;
border-radius: 40px;
background: rgba(204, 204, 204, 0.4196078431372549);
}
.space-60 {
margin-top: 60px;
}
a.carousel-control-prev i {
border: 1px solid #fff;
padding: 15px;
transition: 0.5s ease;
border-radius: 50px;
}
a.carousel-control-prev:hover i {
background: #6c5ce7;
border: 1px solid #6c5ce7;
transition: 0.5s ease;
}
a.carousel-control-next:hover i{
background: #6c5ce7;
border: 1px solid #6c5ce7;
transition: 0.5s ease;
}
.carousel-control-next, .carousel-control-prev{
opacity:1;
}
a.carousel-control-next i {
border: 1px solid #fff;
padding: 15px;
transition: 0.5s ease;
border-radius: 50px;
}
.shape-1 {
position: absolute;
width: 100%;
left: 0;
right: 0;
bottom:0;
z-index: 1111;
}
.banner-section .shape-1 svg {
height: 65% !important;
position: absolute;
bottom: 0;
}
.top-header-inner ul li a {
color: #fff;
font-size: 16px;
letter-spacing: 0.5px;
}
